<template>
  <div>
    <!-- 比赛列表展示 -->
    <div id="box" ref="theBox">
      <van-collapse class='tittle' v-model="activeNames" v-if='basketBalls.length'>
        <van-collapse-item v-for='(matches, index) in basketBalls' :key='index' :title='collapseTitles[index]'
          :name="index">
          <!-- 玩法 -->
          <div :id='"mixBox" + index' class='mixBox'>
            <div class='cont' v-for='(match, index2) in matches' :key='index2'>
              <div class='left'>
                <p class="weeks">{{ match.week + " " + match.week_no }}</p>
                <div>
                  <p>{{ match.cup }}</p>
                  <p>开赛{{ match.jtime }}</p>
                </div>
              </div>
              <div class='right'>
                <div class='info'>
                  <div class='team team1'>
                    <p><b>[客]</b> <em class="post" v-if="match.guest_position">{{ `[${match.guest_position}]` }}</em>
                      <span>{{ match.guest }}</span> </p>
                  </div>
                  <div class='vs'>VS</div>
                  <div class='team team2'>
                    <p> <span>{{ match.home }}</span> <em class='post'
                        v-if="match.home_position">{{ `[${match.home_position}]` }}</em> <b>[主]</b></p>
                  </div>
                </div>
                <table class='tab'>
                <tbody>
                  <tr class='tr1' :class="{ 'sg': match.single }">
                    <td class='not' colspan="3" v-if='match.win === "0.00"'>
                      <p>未开售</p>
                    </td>
                    <template v-else>
                      <td @click.stop='handleSelected($event, "lose", "mnl", match)'
                        :id='isSelected(match.id, "lose") ? "selected" : ""'>
                        <span class='result'>负</span>
                        <span class='odds'>
                          {{ match.lose }}
                          <i v-if="match.mnlChanges" :class="match.mnlChanges.lose[0]">{{ match.mnlChanges.lose[1] }}</i>
                        </span>
                        <img class="icosg" v-if="match.single" src="@/assets/image/ico_danguan.png">
                      </td>
                      <td>
                        <span class='odds'>0</span>
                      </td>
                      <td @click.stop='handleSelected($event, "win", "mnl", match)'
                        :id='isSelected(match.id, "win") ? "selected" : ""'>
                        <span class='result'>胜</span>
                        <span class='odds'>
                          {{ match.win }}
                          <i v-if="match.mnlChanges" :class="match.mnlChanges.win[0]">{{ match.mnlChanges.win[1] }}</i>
                        </span>
                      </td>
                    </template>
                  </tr>
                  <tr class='tr2' :class="{ 'sg': match.hdc_single }">
                    <td class='not' colspan="3" v-if='match.hdc_win === "0.00"'>
                      <p>未开售</p>
                    </td>
                    <template v-else>
                      <td @click='handleSelected($event, "hdc_lose", "hdc", match)'
                        :id='isSelected(match.id, "hdc_lose") ? "selected" : ""'>
                        <span class='result'>让负</span>
                        <span class='odds'>
                          {{ match.hdc_lose }}
                          <i v-if="match.hdcChanges" :class="match.hdcChanges.lose[0]">{{ match.hdcChanges.lose[1] }}</i>
                        </span>
                        <img class="icosg" v-if="match.hdc_single" src="@/assets/image/ico_danguan.png">
                      </td>
                      <td :class='match.hdc_rq >= 0 ? "positive" : "minus"'>
                        <span>{{ match.hdc_rq }}</span>
                      </td>
                      <td @click='handleSelected($event, "hdc_win", "hdc", match)'
                        :id='isSelected(match.id, "hdc_win") ? "selected" : ""'>
                        <span class='result'>让胜</span>
                        <span class='odds'>
                          {{ match.hdc_win }}
                          <i v-if="match.hdcChanges" :class="match.hdcChanges.win[0]">{{ match.hdcChanges.win[1] }}</i>
                        </span>
                      </td>
                    </template>
                  </tr>
                  <tr class='tr3' :class="{ 'sg': match.hilo_single }">
                    <td class='not' colspan="3" v-if='match.df === "0.00"'>
                      <p>未开售</p>
                    </td>
                    <template v-else>
                      <td @click='handleSelected($event, "df", "hilo", match)'
                        :id='isSelected(match.id, "df") ? "selected" : ""'>
                        <span class='result'>大</span>
                        <span class='odds'>
                          {{ match.df }}
                          <i v-if="match.hiloChanges" :class="match.hiloChanges.df[0]">{{ match.hiloChanges.df[1] }}</i>
                        </span>
                        <img class="icosg" v-if="match.hilo_single" src="@/assets/image/ico_danguan.png">
                      </td>
                      <td>
                        <span class='toalsp'>{{ match.toalsp }}</span>
                      </td>
                      <td @click='handleSelected($event, "xf", "hilo", match)'
                        :id='isSelected(match.id, "xf") ? "selected" : ""'>
                        <span class='result'>小</span>
                        <span class='odds'>
                          {{ match.xf }}
                          <i v-if="match.hiloChanges" :class="match.hiloChanges.xf[0]">{{ match.hiloChanges.xf[1] }}</i>
                        </span>
                      </td>
                    </template>
                  </tr>
                </tbody>
                </table>
                <div class='more'>
                  <div v-if="match.hw1_5 !== '0.00'" @click='openMore(index, index2)'>点击展开胜分差投注</div>
                  <div v-else>未开售</div>
                </div>
              </div>
            </div>
          </div>
        </van-collapse-item>
      </van-collapse>
      <div class='not' v-if='!basketBalls.length'>
        <img src="@/assets/image/no_message.png">
        <p>暂无比赛数据</p>
      </div>
    </div>
    <!-- 展开全部赔率信息 -->
    <van-popup v-model:show="show" class='popup' :overlay-style="{ zIndex: 5002 }" :style="{ zIndex: 5002 }">
      <div class='winningPoints'>
        <table>
        <tbody>
          <tr>
            <td rowspan="5" class='name'>
              <p>胜</p>
              <p>分</p>
              <p>差</p>
            </td>
            <td colspan="3" class='flag'>
              <div>
                <p>
                  <span>[客]</span>
                  <em class="post" v-if="moreMatchData.guest_position">{{ `[${moreMatchData.guest_position}]` }}</em>
                  {{ moreMatchData.guest }}
                </p>
                <b>VS</b>
                <p>
                  {{ moreMatchData.home }}
                  <em class="post" v-if="moreMatchData.home_position">{{ `[${moreMatchData.home_position}]` }}</em>
                  <span>[主]</span>
                </p>
              </div>
            </td>
          </tr>
          <tr class='cont'>
            <td @click='handleSelected($event, "hw1_5", "wnm", moreMatchData)'
              :id='isSelected(moreMatchData.id, "hw1_5") ? "selected" : ""'>
              <span class='result'>胜1-5</span>
              <span class='pf odds'>
                {{ moreMatchData.hw1_5 }}
                <i v-if="moreMatchData.wnmChanges"
                  :class="moreMatchData.wnmChanges.hw1_5[0]">{{ moreMatchData.wnmChanges.hw1_5[1] }}</i>
              </span>
              <img class="icosg" v-if="moreMatchData.wnm_single" src="@/assets/image/ico_danguan.png">
            </td>
            <td @click='handleSelected($event, "hw6_10", "wnm", moreMatchData)'
              :id='isSelected(moreMatchData.id, "hw6_10") ? "selected" : ""'>
              <span class='result'>胜6-10</span>
              <span class='pf odds'>
                {{ moreMatchData.hw6_10 }}
                <i v-if="moreMatchData.wnmChanges"
                  :class="moreMatchData.wnmChanges.hw6_10[0]">{{ moreMatchData.wnmChanges.hw6_10[1] }}</i>
              </span>
            </td>
            <td @click='handleSelected($event, "hw11_15", "wnm", moreMatchData)'
              :id='isSelected(moreMatchData.id, "hw11_15") ? "selected" : ""'>
              <span class='result'>胜11-15</span>
              <span class='pf odds'>
                {{ moreMatchData.hw11_15 }}
                <i v-if="moreMatchData.wnmChanges"
                  :class="moreMatchData.wnmChanges.hw11_15[0]">{{ moreMatchData.wnmChanges.hw11_15[1] }}</i>
              </span>
            </td>
          </tr>
          <tr class='cont'>
            <td @click='handleSelected($event, "hw16_20", "wnm", moreMatchData)'
              :id='isSelected(moreMatchData.id, "hw16_20") ? "selected" : ""'>
              <span class='result'>胜16-20</span>
              <span class='pf odds'>
                {{ moreMatchData.hw16_20 }}
                <i v-if="moreMatchData.wnmChanges"
                  :class="moreMatchData.wnmChanges.hw16_20[0]">{{ moreMatchData.wnmChanges.hw16_20[1] }}</i>
              </span>
            </td>
            <td @click='handleSelected($event, "hw21_25", "wnm", moreMatchData)'
              :id='isSelected(moreMatchData.id, "hw21_25") ? "selected" : ""'>
              <span class='result'>胜21-25</span>
              <span class='pf odds'>
                {{ moreMatchData.hw21_25 }}
                <i v-if="moreMatchData.wnmChanges"
                  :class="moreMatchData.wnmChanges.hw21_25[0]">{{ moreMatchData.wnmChanges.hw21_25[1] }}</i>
              </span>
            </td>
            <td @click='handleSelected($event, "hw26_99", "wnm", moreMatchData)'
              :id='isSelected(moreMatchData.id, "hw26_99") ? "selected" : ""'>
              <span class='result'>胜26+</span>
              <span class='pf odds'>
                {{ moreMatchData.hw26_99 }}
                <i v-if="moreMatchData.wnmChanges"
                  :class="moreMatchData.wnmChanges.hw26_99[0]">{{ moreMatchData.wnmChanges.hw26_99[1] }}</i>
              </span>
            </td>
          </tr>
          <tr class='cont'>
            <td @click='handleSelected($event, "gw1_5", "wnm", moreMatchData)'
              :id='isSelected(moreMatchData.id, "gw1_5") ? "selected" : ""'>
              <span class='result'>负1-5</span>
              <span class='pf odds'>
                {{ moreMatchData.gw1_5 }}
                <i v-if="moreMatchData.wnmChanges"
                  :class="moreMatchData.wnmChanges.gw1_5[0]">{{ moreMatchData.wnmChanges.gw1_5[1] }}</i>
              </span>
            </td>
            <td @click='handleSelected($event, "gw6_10", "wnm", moreMatchData)'
              :id='isSelected(moreMatchData.id, "gw6_10") ? "selected" : ""'>
              <span class='result'>负6-10</span>
              <span class='pf odds'>
                {{ moreMatchData.gw6_10 }}
                <i v-if="moreMatchData.wnmChanges"
                  :class="moreMatchData.wnmChanges.gw6_10[0]">{{ moreMatchData.wnmChanges.gw6_10[1] }}</i>
              </span>
            </td>
            <td @click='handleSelected($event, "gw11_15", "wnm", moreMatchData)'
              :id='isSelected(moreMatchData.id, "gw11_15") ? "selected" : ""'>
              <span class='result'>负11-15</span>
              <span class='pf odds'>
                {{ moreMatchData.gw11_15 }}
                <i v-if="moreMatchData.wnmChanges"
                  :class="moreMatchData.wnmChanges.gw11_15[0]">{{ moreMatchData.wnmChanges.gw11_15[1] }}</i>
              </span>
            </td>
          </tr>
          <tr class='cont'>
            <td @click='handleSelected($event, "gw16_20", "wnm", moreMatchData)'
              :id='isSelected(moreMatchData.id, "gw16_20") ? "selected" : ""'>
              <span class='result'>负16-20</span>
              <span class='pf odds'>
                {{ moreMatchData.gw16_20 }}
                <i v-if="moreMatchData.wnmChanges"
                  :class="moreMatchData.wnmChanges.gw16_20[0]">{{ moreMatchData.wnmChanges.gw16_20[1] }}</i>
              </span>
            </td>
            <td @click='handleSelected($event, "gw21_25", "wnm", moreMatchData)'
              :id='isSelected(moreMatchData.id, "gw21_25") ? "selected" : ""'>
              <span class='result'>负21-25</span>
              <span class='pf odds'>
                {{ moreMatchData.gw21_25 }}
                <i v-if="moreMatchData.wnmChanges"
                  :class="moreMatchData.wnmChanges.gw21_25[0]">{{ moreMatchData.wnmChanges.gw21_25[1] }}</i>
              </span>
            </td>
            <td @click='handleSelected($event, "gw26_99", "wnm", moreMatchData)'
              :id='isSelected(moreMatchData.id, "gw26_99") ? "selected" : ""'>
              <span class='result'>负26+</span>
              <span class='pf odds'>
                {{ moreMatchData.gw26_99 }}
                <i v-if="moreMatchData.wnmChanges"
                  :class="moreMatchData.wnmChanges.gw26_99[0]">{{ moreMatchData.wnmChanges.gw26_99[1] }}</i>
              </span>
            </td>
          </tr>
        </tbody>
        </table>
        <div class='btn'>
          <div class='cancel' @click='cancel()'>取消</div>
          <div class='confirm' @click='confirm()'>确定</div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script setup>
import { storeToRefs } from 'pinia'
import { useCalcStore } from "@/stores";
import { playRes } from "@/utils/data";

const calc = useCalcStore() // 竞猜store
const { basketBalls, orderData } = storeToRefs(calc)

// 当前订单数据
const selected = ref({})
let tempSelectMatch = null;
function dataInit() {
  tempSelectMatch = sessionStorage.getItem('tempSelectMatch');
  if (tempSelectMatch) {
    selected.value = onSetNewOrderData2(JSON.parse(tempSelectMatch));
  } else {
    selected.value = JSON.parse(JSON.stringify(orderData.value))
  }
}
onDeactivated(() => {
  if (tempSelectMatch) {
    sessionStorage.removeItem('tempSelectMatch')
  }
})
onActivated(dataInit)

// 折叠面板活跃状态
const activeNames = ref([0, 1, 2])
const collapseTitles = computed(() => {
  return basketBalls.value.map((itms) => `${itms[0].showData} ${itms[0].week} 共${itms.length}场`)
})

const theBox = ref()
onMounted(() => {
  nextTick(() => {
    dataInit()
    if (basketBalls.value.length) {
      activeNames.value = basketBalls.value.map((itm, index) => index)
    }

    // 获取屏幕高度
    const height = document.getElementById('app').clientHeight
    const size = document.querySelector('html').style.fontSize.replace('px', '')
    // 2.88+2.7
    theBox.value.style.height = height - 2.7 * size + 'px'
  })
})

// 选号功能
function handleSelected(event, play, type, match) {
  const id = match.id
  if (!selected.value[id]) {
    selected.value[id] = []
  }
  let date = {
    matchId: id,
    type,
    play,
    result: playRes[play],
    odds: match[play],
    single: type === 'mnl' ? match.single : match[`${type}_single`],
    home: match.home,
    guest: match.guest,
    home_position: match.home_position,
    guest_position: match.guest_position,
    jtime: match.stime,
    rq: match.hdc_rq,
    mid: match.toalsp,
    week: match.week,
    weekNum: (match.week_num + match.week_no),
    weekno: match.week_no,
    cup: match.cup,
    h_icon: match.h_icon,
    g_icon: match.g_icon
  }
  if (event.target.tagName.toUpperCase() === 'TD') {
    if (event.target.id.toUpperCase() === 'SELECTED') {
      selected.value[id].splice(findIndex(selected.value[id], date), 1)
    } else {
      selected.value[id].push(date)
    }
  } else {
    if (event.target.parentNode.id.toUpperCase() === 'SELECTED') {
      selected.value[id].splice(findIndex(selected.value[id], date), 1)
    } else {
      selected.value[id].push(date)
    }
  }
  // 如果比赛订单数组为空 清除当前数组
  if (selected.value[id].length === 0) {
    delete selected.value[id]
  }
  // 修改数据
  calc.saveData(selected.value)
  // 修改数据
  calc.saveBasketballData(selected.value)
}
// 记录选择的玩法信息
const isSelected = (id, ply) => {
  let flag = false
  for (let key in selected.value) {
    selected.value[key].forEach((item) => {
      if (Number(item.matchId) === Number(id) && item.play === ply) {
        flag = true
      }
    })
  }
  return flag
}

// 数组中查找 对象是否存在 返回 index
function findIndex(arr, text) {
  let Index = null
  arr.forEach((item, index) => {
    if (JSON.stringify(item) === JSON.stringify(text)) {
      Index = index
    }
  })
  return Index
}

const show = ref(false)
const moreMatchData = ref({})
const openMore = (index, index2) => {
  moreMatchData.value = basketBalls.value[index][index2]
  show.value = true
}
const cancel = () => {
  show.value = false
}
const confirm = () => {
  show.value = false
}

// 补充完整奖金优化中需要的非必要参数
function onSetNewOrderData2(obj) {
  let resobj = {}
  const matches = basketBalls.value.slice().flat()
  for (const key in obj) {
    const idx = matches.findIndex(v => Number(v.id) === Number(key))
    if (idx > -1) {
      const match = matches[idx]
      resobj[key] = []
      for (let i = 0; i < obj[key].length; i++) {
        const element = obj[key][i]
        // 在内参详情中快速选择的玩法，数据不完整需要再次补充后使用
        if (!element.odds && !element.home && !element.guest) {
          element.odds = match[element.play]
          element.single = element.type === 'mnl' ? match.single : match[`${element.type}_single`]
          element.home = match.home
          element.guest = match.guest
          element.home_position = match.home_position
          element.guest_position = match.guest_position
          element.week = match.week
          element.weekNum = (match.week_num + match.week_no)
          element.weekno = match.week_no
          element.cup = match.cup
          element.rq = match.hdc_rq
          element.mid = match.toalsp
          element.jtime = match.stime
          element.h_icon = match.h_icon
          element.g_icon = match.g_icon
        }
        resobj[key].push(element)
      }
    }
  }
  // 修改数据
  calc.saveData(resobj)
  return resobj
}
</script>

<style lang='less' scoped>
#box {
  background: var(--van-collapse-item-content-background-color);
  padding-bottom: 100px;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

i {
  font-style: normal;

  &.up {
    color: #ea4748;
  }
}

.not {
  width: 100%;
  height: 100%;
  text-align: center;
  margin-top: 100px;

  img {
    display: inline-block;
    width: 50%;
  }

  p {
    margin-top: 10px;
    font-size: 16px;
    color: #666;
  }
}

.mixBox {
  width: 100%;

  .cont {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;

    .left {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;

      .weeks {
        font-size: 12px;
        color: #333;
        margin-bottom: 15px;
      }

      div {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: flex-start;

        .fx {
          margin-top: 5px;
          display: flex;
          justify-content: center;
          align-items: center;

          span {
            color: #fe0000;
          }

          i {
            color: #fe0000;
            transform: scale(0.9);
            margin: -2.5px 0 0 5px;
          }
        }

        span {
          font-size: 12px;
          color: #999;
        }

        i {
          font-size: 15px;
          color: #999;
        }

        span:nth-of-type(2) {
          margin: 10px 0;
        }
      }

      .btnbox {
        height: 35px;
        display: flex;
        justify-content: center;
        align-items: center;

        >span {
          display: block;
          width: 45px;
          line-height: 21px;
          font-size: 12px;
          text-align: center;
          border-radius: 5px;
          background-color: #ff5b35;
          color: #fff;
        }

        &.done {
          >span {
            background-color: #999;
          }
        }
      }
    }

    .right {
      width: 295px;
      height: 100%;
      background: #fff;
      padding: 7.5px 10px;
      border-radius: 7.5px;

      .info {
        width: 100%;
        height: 20px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 0 10px;

        .vs {
          width: 20%;
          // margin:0 15px;
          font-size: 13px;
          color: #666;
          text-align: center;
        }

        .team {
          width: 40%;
          display: flex;
          height: 100%;
          justify-content: center;
          align-items: center;

          img {
            width: 26px;
            height: 13px;
          }

          p {
            color: #666;
            font-size: 12px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            b {
              font-weight: normal;
              font-size: 10px;
            }

            span {
              font-size: 13px;
              font-weight: bold;
              line-height: 12.5px;
              color: #333;
            }

            .post {
              font-style: normal;
              font-size: 10px;
              color: #999;
            }
          }
        }

        .team1 {
          justify-content: flex-start;

          span {
            margin-left: 5px;
          }
        }

        .team2 {
          justify-content: flex-end;

          span {
            margin-right: 5px;
          }
        }
      }

      .tab {
        width: 100%;
        height: 90px;
        margin-bottom: 7.5px;

        tr {
          position: relative;
          z-index: 1;
          border: 1px solid #eee;

          .icosg {
            position: absolute;
            left: -5px;
            top: -13px;
            height: 13px;
          }

          &.sg {
            border-color: #2f7edb;
          }
        }

        td {
          text-align: left;
          vertical-align: middle;
          height: 25px;
          padding: 0 7.5px;

          span {
            font-size: 13px;
          }

          span:first-of-type {
            letter-spacing: 1.5px;
          }

          span:last-of-type {
            float: right;
          }

          .result {
            color: #666;
          }

          .odds {
            color: #999;
          }

          .toalsp {
            color: #11457e;
          }

          &:not(:last-of-type) {
            border-right: 1px solid #eee;
          }
        }

        td:nth-of-type(2) {
          text-align: center;
          vertical-align: middle;

          span {
            float: none;
          }
        }

        .positive {
          background: #d79a9a;
          color: #fe0000;
        }

        .minus {
          background: #9dd599;
          color: #0c9001;
        }

        .not {
          text-align: center;

          p {
            color: #999;
            font-size: 13px;
          }
        }
      }

      .more {
        // height:.84rem;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        div {
          width: 140px;
          height: 24px;
          text-align: center;
          line-height: 24px;
          color: #666;
          border: 1px solid #666;
          border-radius: 5px;
        }
      }
    }
  }
}

:deep(.popup) {
  width: 340px;
  height: 240px;
  background-color: #fff;

  .winningPoints {
    width: 100%;
    height: 100%;

    table {
      width: 100%;
      height: 171px;

      table-layout: fixed;
    }

    tr,
    td {
      border: 1px solid #eee;
    }

    td {
      padding: 0 7.5px;

      >span:last-of-type {
        float: right;
      }

      .result {
        color: #666;
      }

      .odds {
        color: #999;
      }
    }

    .cont {
      position: relative;
      z-index: 1;
      border: 1px solid #eee;

      .icosg {
        position: absolute;
        left: 25px;
        top: -16px;
        height: 16px;
      }

      p {
        width: 100%;
        text-align: center;
        font-size: 12px;
        color: #666;
      }

      span {
        font-size: 12px;
        color: #666;
      }

      .pf {
        font-size: 12px;
        color: #999;
      }
    }

    .name {
      width: 26px;

      p {
        width: 100%;
        text-align: center;
        margin-bottom: 15px;
        color: #fe0000;
        font-size: 13px;
      }

      p:last-of-type {
        margin: 0;
      }
    }

    .flag {
      height: 35px;

      >div {
        display: flex;
        justify-content: center;
      }

      b {
        width: 20%;
        text-align: center;
        font-weight: normal;
        font-size: 13px;
        color: #999;
        margin: 0 5px;
      }

      p {
        text-align: right;
        width: 40%;
        font-size: 14px;

        span {
          color: #999;
          font-size: 12px;
          display: inline-block;
          transform: scale(0.9);
          margin-right: 5px;
        }

        .post {
          font-size: 12px;
          font-style: normal;
          transform: scale(0.9);
          color: #999;
        }
      }

      p:last-of-type {
        text-align: left;

        span {
          margin-left: 5px;
        }
      }
    }

    .btn {
      margin-top: 15px;
      width: 100%;
      height: 32.5px;
      display: flex;
      justify-content: space-around;

      >div {
        width: 120px;
        height: 100%;
        text-align: center;
        line-height: 32.5px;
        border-radius: 4px;
        font-size: 16px;
      }

      .cancel {
        background: #fff;
        border: 1px solid #999;
        color: #999;
      }

      .confirm {
        background: #fe0000;
        color: #fff;
      }
    }
  }
}

#selected {
  background: #ea4748;

  span {
    color: #fff;
  }

  p {
    color: #fff;
  }

  .up,
  .down {
    color: #fff;
  }
}
</style>
